<template>
  <view class="xy-course-grad" :style="'background-image: url('+$xyfun.image(item.image)+')'" @tap="$xyfun.to('/pages/course/detail?id='+item.id)">
    <view class="item ovh">
      <view class="l">
        <view class="name lh-40 ovh tb">{{item.name}}</view>
        <view class="c_tags m-t-30 ts-26" v-if="tagList.length>0"><text  v-for="(sitem,index) in tagList">{{sitem}}</text></view>
        <view class="ts-26 m-t-20">参考价￥{{item.price}}<text style="margin: 0 20rpx;display: inline-block;">|</text>剩余可报名 {{item.max_apply}}人</view>
      </view>
      <view class="r">
        <view class="yuyue">预约</view>
      </view>
    </view>
  </view>
</template>
<script>
import {mapState} from 'vuex';

export default {
  name: "xyCourseGrad",
  props: {
    item: {
      type: Object,
    },
  },
  computed: {
    ...mapState(['common'])
  },
  created() {
    //难度number类型转array类型
    let diff_arr = [];
    for (let i = 0; i < this.item.difficulty; i++) {
      diff_arr.push(i);
    }
    this.diff_arr = diff_arr;
    if (this.item.tags !== '') {
      this.tagList = this.item.tags.split(",");
    } else {
      this.tagList = [];
    }
  },
  data() {
    return {
      tagList: [],
      diff_arr: [],
    };
  },
  methods: {
    jump() {
      var that = this;
      let id = this.item.id;
      let tid = this.item.id;
      this.$api.get({
        url: '/course/timesec_detail',
        loadingTip: '加载中...',
        data: {
          id: id,
          tid: tid
        },
        success: res => {
          let courseTimesec = res;
          if (courseTimesec.is_seat == 1 && courseTimesec.seat_widht !== 0 && courseTimesec.seat_height !== 0) {
            //需要选择座位
            that.$xyfun.to('/pages/pay/seat?id=' + id + '&tid=' + tid)
          } else {
            //不需要选择座位
            that.$xyfun.to('/pages/pay/create?id=' + id + '&tid=' + tid)
          }
        }
      })
    }
  }
}
</script>
<style lang="scss">
.xy-course-grad {
  color: #fff;
  width: 100%;
  overflow: hidden;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.21);
  border: 1rpx solid #d2d2d2;

  .c_tags {
    max-width: 450rpx;
    white-space: nowrap;
    overflow: auto;

    &::-webkit-scrollbar {
      display: none;
    }

    text {
      border-radius: 6rpx;
      background: #ffffff20;
      color: #fff;
      padding: 10rpx 14rpx;
      margin-right: 10rpx;
    }
  }

  .item {
    background: #45454550;
    width: 100%;
    height: 300rpx;
    color: #fff;
    padding: 20rpx;
    border-radius: 10rpx;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    box-sizing: border-box;
    line-height: 50rpx;

    .name {
      height: 42rpx;
      font-size: 34rpx;
    }

    .avatar {
      width: 44rpx;
      height: 44rpx;
      border-radius: 22rpx;
      margin-right: 20rpx;
    }

    .l {
      display: flex;
      flex-direction: column;
    }

    .r {
      display: flex;
      flex-direction: column;
      align-items: end;
      padding-right: 20rpx;

      .yuyue {
        width: 140rpx;
        height: 70rpx;
        line-height: 70rpx;
        background: #B5FFE9;
        color: #000;
        border-radius: 10rpx;
        text-align: center;
        font-size: 30rpx;
        letter-spacing: 4rpx;
        font-weight: 700;
        margin-bottom: 0rpx;
      }
    }

  }
}
</style>
